<template>
  <div class="delivery">
    <el-form ref="deliveryForm" :model="deliveryModel" :rules="deliveryVali" size="small" label-width="80px">
      <template v-if="deliveryType == 0">
        <el-form-item label="订单号">
          <el-input v-model="deliveryModel.orderNo" placeholder="请输入订单号" readonly disabled clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="快递公司" prop="deliveryName">
          <el-select v-model="deliveryModel.deliveryName" placeholder="请选择快递公司" clearable :style="{ width: '100%' }">
            <el-option v-for="item in express" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="deliveryNum">
          <el-input v-model="deliveryModel.deliveryNum" placeholder="请输入快递单号" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </template>
    </el-form>
    <div class="subBtnWid" style="text-align: right;">
      <el-button size="small" type="primary" @click="handelConfirm('deliveryForm')">提交</el-button>
    </div>
  </div>
</template>
<script>
import { getLogisticsList } from '@/api/setting'
export default {
  name: 'DistributionInfo',
  props: {
    orderId: {
      type: [String, Number],
      default: ""
    },
    deliveryType: {
      type: [String, Number],
      default: 0
    },
    orderNo: {
      type: [String, Number],
      default: ""
    },
    deliveryName: {
      type: [String, Number],
      default: ""
    },
    deliveryNum: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      deliveryModel: {
        orderNo: this.orderNo,
        deliveryName: this.deliveryName,
        deliveryNum: this.deliveryNum
      },
      deliveryVali: {
        deliveryName: [
          { required: true, message: '请选择快递公司', trigger: 'change' }
        ],
        deliveryNum: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ]
      },
      express: {}
    }
  },
  watch: {
    disData: {
      handler(newVal) {
        this.$set(this, 'deliveryModel', {
          orderNo: newVal.orderNo,
          DeliveryCompany: undefined,
          deliveryNum: newVal.deliveryNum
        })
      },
      immediate: true
    }
  },
  methods: {
    getList() {
      getLogisticsList({
        orderBy: 'Sort desc',
        pageSize: 30
      }).then(async res => {
        this.express = res.data
      })
    },
    // 关闭
    handelClose() {
      this.$emit('close')
    },
    // 提交
    handelConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.handelClose()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .delivery {
    .el-dialog__footer {
      button.el-button {
        width: 100% !important;
      }
      button.el-button + button.el-button {
        margin-left: 0;
        margin-top: 10px;
      }
    }
  }
</style>
